<template>

  <div>
    <el-form v-model="tableData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="园区名称" prop="zoneName">
        <el-input v-model="tableData.zoneName"></el-input>
      </el-form-item>

      <el-form-item label="园区所在省" prop="province">
        <el-select v-model="tableData.province" placeholder="请选择活动区域">
          <el-option label="山东省" value="山东省"></el-option>
          <el-option label="河北省" value="河北省"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="园区所在市" prop="province">
        <el-select v-model="tableData.province" placeholder="请选择活动区域">
          <el-option label="潍坊市" value="潍坊市"></el-option>
          <el-option label="衡水市" value="衡水市"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="园区所在县" prop="urban">
        <el-select v-model="tableData.urban" placeholder="请选择活动区域">
          <el-option label="山东省" value="shandong"></el-option>
          <el-option label="河北省" value="hebei"></el-option>
        </el-select>
      </el-form-item>


      <!--      <el-form-item label="活动时间" required>-->
      <!--        <el-col :span="11">-->
      <!--          <el-form-item prop="date1">-->
      <!--            <el-date-picker type="date" placeholder="选择日期" v-model="tableData.date1" style="width: 100%;"></el-date-picker>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->

      <!--        <el-col class="line" :span="1">-</el-col>-->
      <!--        <el-col :span="11">-->
      <!--          <el-form-item prop="date2">-->
      <!--            <el-time-picker placeholder="选择时间" v-model="tableData.date2" style="width: 100%;"></el-time-picker>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="saveZoneInfo()">立即保存</el-button>
        <el-button type="primary" @click="FanHui">返回</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "zoneInfo",
  data() {
    return {
      tableData: [{
        id: '',
        address: '',
        createDate: '',
        province: '',
        urban: '',
        zoneName: '',
        isDelete: '',
      }],
      rules: {
        name: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        region: [
          {required: true, message: '请选择活动区域', trigger: 'change'}
        ]
      },
      id: ''
    }
  },
  methods: {
    zoneInfo() {
      axios({
        url: "/api/zoneInfo/" + this.id,
        method: "GET",
        headers: {"Authorization": localStorage.getItem("token")}
      }).then(res => {
        // this.id = res.data.data[0].id
        this.tableData = res.data.data[0]
        console.log(res)
      })
    },
    FanHui() {
      this.$router.push("/manage")
    },
    saveZoneInfo() {
      axios({
        url: "/api/editZone",
        method: "POST",
        headers: {"Authorization": localStorage.getItem("token")},
        data: this.tableData
      }).then(res=>{
        this.$router.push('/manage')
        console.log(res)
      })
    }
  },
  created() {
    this.id = this.$route.params.id
    this.zoneInfo()
  }
}
</script>

<style scoped>

</style>
